﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="edit.ascx.cs" Inherits="Widgets.DisqusCommentsSummary.Edit" %>

<style type="text/css">
  #body label {display: block; float:left; width:150px}
  #body input {display: block; float:left; }
  #body div {padding: 10px; clear: left;}
</style>

<div id="body">

<div id="widgetType">
<label for="<%=cboWidgetType.ClientID %>">Widget type</label>
<asp:DropDownList runat="server" ID="cboWidgetType" Width="200" AutoPostBack="false" onChange="return cboWidgetTypeChanged();">
<asp:ListItem Value="combo">Combination</asp:ListItem>
<asp:ListItem Value="recent">Recent Comments</asp:ListItem>
<asp:ListItem Value="popular">Popular Threads</asp:ListItem>
<asp:ListItem Value="people">Top Commenters</asp:ListItem>
</asp:DropDownList>
</div>

<div id="numberOfItems">
<label for="<%=txtNumberOfItems.ClientID %>">Number of items</label>
<asp:TextBox runat="server" ID="txtNumberOfItems" Width="200" />
<asp:CompareValidator ID="txtNumberOfItemsCompare" runat="Server" ControlToValidate="txtNumberOfItems" Type="Integer" Operator="DataTypeCheck" ErrorMessage="Please enter a valid number" Display="Dynamic" />
<asp:RequiredFieldValidator ID="txtNumberOfItemsRequired" runat="server" ControlToValidate="txtNumberOfItems" ErrorMessage="Please enter a valid number" Display="dynamic" />
</div>

<div id="showModerators">
<label for="<%=cboShowModerators.ClientID %>">Show moderators in ranking</label>
<asp:DropDownList runat="server" ID="cboShowModerators" Width="200">
<asp:ListItem Value="true">Yes</asp:ListItem>
<asp:ListItem Value="false">No</asp:ListItem>
</asp:DropDownList>
</div>

<div id="colorTheme">
<label for="<%=cboColorTheme.ClientID %>">Color Theme</label>
<asp:DropDownList runat="server" ID="cboColorTheme" Width="200">
<asp:ListItem Value="blue">Blue</asp:ListItem>
<asp:ListItem Value="grey">Grey</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="orange">Orange</asp:ListItem>
</asp:DropDownList>
</div>

<div id="defaultTabView">
<label for="<%=cboDefaultTabView.ClientID %>">Default tab view</label>
<asp:DropDownList runat="server" ID="cboDefaultTabView" Width="200">
<asp:ListItem Value="people">Top Commenters</asp:ListItem>
<asp:ListItem Value="recent">Recent Comments</asp:ListItem>
<asp:ListItem Value="popular">Popular Threads</asp:ListItem>
</asp:DropDownList>
</div>

<div id="showAvatars">
<label for="<%=cboShowAvatars.ClientID %>">Show avatars</label>
<asp:DropDownList runat="server" ID="cboShowAvatars" Width="200">
<asp:ListItem Value="true">Yes</asp:ListItem>
<asp:ListItem Value="false">No</asp:ListItem>
</asp:DropDownList>
</div>

<div id="avatarSize">
<label for="<%=cboAvatarSize.ClientID %>">Avatar size</label>
<asp:DropDownList runat="server" ID="cboAvatarSize" Width="200">
<asp:ListItem Value="24">24px</asp:ListItem>
<asp:ListItem Value="32">32px</asp:ListItem>
<asp:ListItem Value="48">48px</asp:ListItem>
<asp:ListItem Value="92">92px</asp:ListItem>
<asp:ListItem Value="128">128px</asp:ListItem>
</asp:DropDownList>
</div>

<div id="commentExceprtLength">
<label for="<%=txtCommentExcerptLength.ClientID %>">Comment excerpt length</label>
<asp:TextBox runat="server" ID="txtCommentExcerptLength" Width="200" />
<asp:CompareValidator ID="txtCommentExcerptLengthCompare" runat="Server" ControlToValidate="txtCommentExcerptLength" Type="Integer" Operator="DataTypeCheck" ErrorMessage="Please enter a valid number" Display="Dynamic" />
<asp:RequiredFieldValidator ID="txtCommentExcerptLengthRequired" runat="server" ControlToValidate="txtCommentExcerptLength" ErrorMessage="Please enter a valid number" Display="dynamic" />
</div>


</div>

<script language="javascript" type="text/javascript">
    function cboWidgetTypeChanged(e) {
        var cbo = document.getElementById('<%=cboWidgetType.ClientID %>');
        switch (cbo.selectedIndex) {
            case 0: // "combo"
                document.getElementById('showModerators').style.display = "block";
                document.getElementById('colorTheme').style.display = "block";
                document.getElementById('defaultTabView').style.display = "block";
                document.getElementById('commentExceprtLength').style.display = "block";
                document.getElementById('showAvatars').style.display = "none";
                document.getElementById('avatarSize').style.display = "none";
                break;
            case 1: // recent comments
                document.getElementById('showModerators').style.display = "none";
                document.getElementById('colorTheme').style.display = "none";
                document.getElementById('defaultTabView').style.display = "none";
                document.getElementById('commentExceprtLength').style.display = "block";
                document.getElementById('showAvatars').style.display = "block";
                document.getElementById('avatarSize').style.display = "block";
                break;
            case 2: // popular threads
                document.getElementById('showModerators').style.display = "none";
                document.getElementById('colorTheme').style.display = "none";
                document.getElementById('defaultTabView').style.display = "none";
                document.getElementById('commentExceprtLength').style.display = "none";
                document.getElementById('showAvatars').style.display = "none";
                document.getElementById('avatarSize').style.display = "none";
                break;
            case 3: // top commenters
                document.getElementById('showModerators').style.display = "block";
                document.getElementById('colorTheme').style.display = "none";
                document.getElementById('defaultTabView').style.display = "none";
                document.getElementById('commentExceprtLength').style.display = "none";
                document.getElementById('showAvatars').style.display = "block";
                document.getElementById('avatarSize').style.display = "block";
                break;
        }

        return false;
    }

    cboWidgetTypeChanged({});
</script>